
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
</style>
<!-- tsx -->
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 提 现 记 录 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input
                    clearable
                    v-model="query.openid"
                    style="width: 200px; margin: 0 20px 0 0"
                    placeholder="会员账号"
                    class="handle-input mr10"
                ></el-input>
                <el-select clearable v-model="query.status" style="width: 200px; margin: 0 20px 0 0" placeholder="提现状态" class="handle-select mr10">
                    <el-option key="1" label="提现中" :value="10"></el-option>
                    <el-option key="2" label="提现成功 " :value="20"></el-option>
                    <el-option key="3" label="提现失败" :value="30"></el-option>
                </el-select>
                <el-button type="primary" @click="getList">搜索</el-button>
            </div>
            <el-table :data="tableData" height="400" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="" label="头像" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.wechatInfo.avatarUrl" :preview-src-list="[scope.row.portrait]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="昵称" width="100" align="center">
                    <template slot-scope="scope">
                    {{ scope.row.wechatInfo.nickName }}
                  </template>
                </el-table-column>
                <el-table-column prop="serialNo" label="流水号"  align="center" show-overflow-tooltip>
                    <!-- <template slot-scope="scope">
                    {{ scope.row.category | tyepFilter }}
                  </template> -->
                </el-table-column>
                <el-table-column prop="openid" label="会员ID"  align="center" how-overflow-tooltip></el-table-column>
                <el-table-column prop="applyAmount" label="申请提现金额" width="200"  align="center" how-overflow-tooltip></el-table-column>
                <!-- <el-table-column prop="applyAmount" label="申请提现金额" width="100" align="center"></el-table-column> -->
                <el-table-column prop="commission" label="手续费" align="center" how-overflow-tooltip></el-table-column>
                <el-table-column prop="bankAccount" label="银行卡号"  align="center" how-overflow-tooltip></el-table-column>
                <el-table-column prop="bankName" label="银行名字"  align="center" how-overflow-tooltip></el-table-column>
                <el-table-column prop="name" label="持卡人名字" width="200" align="center" how-overflow-tooltip>
                </el-table-column>
                 <el-table-column prop="time" label="提现时间" align="center" how-overflow-tooltip>
                </el-table-column>
                 <el-table-column prop="status" label="提现状态" align="center" how-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="orderNo"  label="汇款单号" width="100"  align="center" how-overflow-tooltip></el-table-column>
                <el-table-column prop="remark"  label="提现失败原因" width="100"  align="center" how-overflow-tooltip></el-table-column>
                <el-table-column label="操作"  align="center"  width="200" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="searchDetail(scope.row)">成功</el-button>
                        <el-button size="mini" type="warning"  @click="deleteDetail(scope.row)">失败</el-button>
                        <!-- <el-button size="mini" type="primary" @click="queryDetail(scope.row.id)">详情</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="成功" :visible.sync="senInfoShow" width="40%">
            <el-form ref="send" :model="senInfo" label-width="200px">
                <el-form-item label="提现ID:" v-show="display">
                    <el-input disabled v-model="senInfo.id" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="填写银行转账单号:">
                    <el-input v-model="senInfo.orderNo" style="width:200px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="senInfoShow = false">取 消</el-button>
                <el-button type="primary" @click="sureSend">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="失败" :visible.sync="senInfoShow2" width="40%">
            <el-form ref="send" :model="senInfo2" label-width="100px">
                <el-form-item label="提现ID:" v-show="display">
                    <el-input v-model="senInfo2.id" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="失败原因:">
                    <el-input v-model="senInfo2.remark" style="width:200px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="senInfoShow2 = false">取 消</el-button>
                <el-button type="primary" @click="sureSend2">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { PagingWithdraw } from '@/api/vip';
import { WithdrawFail,WithdrawSuccess } from '@/api/finance'
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            query: {
                pageIndex: 1,
                pageSize: 20,
                serialNo:'',
                mobile: ''
            },
            pageTotal:0,
            senInfoShow2:false,
            tableData:[],
            rankList: [],
            senInfoShow:false,
            senInfo:{},
            senInfo2:{}
        };
    },
    // 过滤器
    filters: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        success(id){

        },
        fail(id){

        },
        queryDetail(id) {
            QueryInfo({id:id}).then(res => {
                // console.log(res)
                this.senInfo = res.Data.memberinfo
                this.senInfoShow = true
            })
        },
        close(id) {
            Disable({id:id}).then(res => {
                this.getList()
            })
        },
        open(id) {
            Enable({id:id}).then(res => {
                this.getList()
            })
        },
        pageChange(e) {
            this.query.pageIndex = e;
            this.getList();
        },
        getList() {
            PagingWithdraw(this.query).then((res) => {
                this.tableData = res.Data.list;
                this.pageTotal = res.Data.paging.totalItemCount;
                // this.rankList = res.Data.rankList
            });
        },
        sizeChange(e) {
            this.query.pageSize = e;
            this.getList();
        },
        searchDetail(info) {
            //   console.log(info)
            this.senInfo = {id:info.id,orderNo:''};
            this.senInfoShow = true;
        },
        deleteDetail(info) {
            this.senInfo2 = {id:info.id,remark:''};
            this.senInfoShow2 = true;
        },
        sureSend2() {
            WithdrawFail(this.senInfo2).then((res) => {
                //   console.log(res)
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.senInfoShow2 = false;
                }
            });
        },
        sureSend() {
            WithdrawSuccess(this.senInfo).then((res) => {
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.senInfoShow = false;
                }
            });
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log(123);
        this.getList();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>